<template>
	<view class="zone">

		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar">
					<u-icon class="back" color="#fff" size="20px" @click="$p.back()" name="arrow-left"></u-icon>
					<text style="color:#fff;" >市场</text>
					<text class="r_title" @click="logpopshow()">记录</text>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<!-- tab部分 -->
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="[stat == item.id?'active':'']"
					@click="tabchange(item.id)">{{item.name}}</view>
			</view>

			<view class="xiala">
				<view class="tab2">
					<view v-for="item in tablist1" :key="item.id" :class="[stat1 == item.id?'active2':'']"
						@click="tabchange1(item.id)">{{item.name}}</view>
				</view>

				<scroll-view scroll-x  class="scrollbox">
					<view class="lists">
						<view class="list_sons" @click="shaixuan(0,shaiList[stat1][0])">
							<view class="img_bg" :class="[num==0?'border':'']">
								<image src="http://img.cpgm.cc/panda/static/game/vib.png" class="bgtu"
									mode="widthFix"></image>
								<image src="http://img.cpgm.cc/panda/static/game/quanb2.png" class="baowu1" mode="widthFix">
								</image>
							</view>
							<view :class="[num==0?'name':'name2']">
								全部
							</view>
						</view>
						
						<view class="list_sons" v-for="(item,index) in shaiList[stat1]" v-if="index!=0"
							@click="shaixuan(index,item)" :key="index">
							<view class="img_bg" :class="[num==index?'border':'']">
								<image src="http://img.cpgm.cc/panda/static/game/vib.png" class="bgtu"
									mode="widthFix"></image>
								<image
									:src="item.img?imgurl+item.img:`http://img.cpgm.cc/panda/static/daoju/${index}.png`"
									class="baowu"  mode="widthFix">
								</image>
							</view>
							<view :class="[num==index?'name':'name2']">
								{{item.name}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>


			<scroll-view scroll-y class="scrollbox2"  @scrolltolower="scrolltolowerlist()">
				<view class="list" v-if="stat == 1">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="i_left">
							<view class="imgbox">
								<image :src="imgurl + item.img" mode="widthFix" />
							</view>
							<view class="word">
								<p>{{item.name}}</p>
								<p>出售数量：<text>{{item.num}}</text></p>
								<view class="whitebg"> <text>{{item.crystal}}银元/个</text>
									<text>总价{{(item.crystal * item.num).toFixed(2)}}银元</text>
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button"
							@click="buy(item,index)">购买</u-button>
					</view>

					<view v-if="list.length==0" class="empty">
						<image src="http://img.cpgm.cc/panda/static/public/empty.png" class="zaneu_img" mode="widthFix">
						</image>
						<text>
							没有数据哦~
						</text>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>

				<view class="list" v-if="stat == 2">
					<view class="item" v-for="(item,index) in list2" :key="index">
						<view class="i_left">
							<view class="imgbox">
								<image :src="imgurl+item.img" mode="widthFix" />
							</view>
							<view class="word">
								<p>{{item.name}}</p>
								<p>求购数量 : <text>{{item.num}}</text></p>
								<view class="whitebg"> <text>{{item.crystal}}银元/个</text>
									<text>总价{{(item.crystal * item.num).toFixed(2)}}银元</text>
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button"
							@click="sell(item)">出售</u-button>
					</view>

					<view v-if="list2.length==0" class="empty">
						<image src="http://img.cpgm.cc/panda/static/public/empty.png" class="zaneu_img" mode="widthFix">
						</image>
						<text>没有数据哦~</text>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />
				</view>
			</scroll-view>
			

			<view class="btnbox">
				<view class="p_btn" @click="my_want">我的求购</view>
				<view class="line"></view>
				<view class="p_btn" @click="my_sales">我的出售</view>
			</view>
			
		</view>



		<!-- 投诉弹出层 -->
		<u-popup mode="center" border-radius="30" v-model="show4">
			<view class="tanchu">
				<view class="center_prop">
					<!-- 			<view class="bg_qiu">
		
					</view> -->
					<!-- <image class="xing" src="http://img.cpgm.cc/panda/static/my/xing.png" mode="widthFix"></image> -->
					<view class="text">
						温馨提示
					</view>
					<!-- <image class="xing" src="http://img.cpgm.cc/panda/static/my/xing.png" mode="widthFix"></image> -->
				</view>
				<view class="tishi">
					确定使用{{(item.crystal*item.num).toFixed(2)}}银元购买{{item.num}}个{{item.name}}吗？
				</view>
				<view class="btn">
					<view @click="quxiao" class="lef_btn button">
						取消
					</view>
					<view @click="querenTs" class="rig_btn button">
						确定
					</view>
				</view>
			</view>
			<!-- <image class="cha" @click="cha2" src="http://img.cpgm.cc/panda/static/my/cha.png" mode="widthFix"></image> -->
		</u-popup>


		<!-- 出售弹出层 -->
		<u-popup mode="center" border-radius="30" v-model="show5">
			<view class="tanchu">
				<view class="center_prop">
					<view class="text">
						温馨提示
					</view>
				</view>
				<view class="tishi">
					确定使用{{item.num}}个{{item.name}}兑换{{(item.num*item.crystal).toFixed(2)}}银元吗？
				</view>
				<view class="btn">
					<view @click="quxiao2" class="lef_btn button">
						取消
					</view>
					<view @click="querenTs2" class="rig_btn button">
						确定
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 点击购买弹窗 -->
		<u-popup v-model="show2" @close="close2" :custom-style="{maxWidth:'480px',margin:'0 auto'}" border-radius="25"
			mode="bottom">
			<view class="tanchu">
				<view class="goumai ">
					购买
				</view>
				<!-- 步进器 -->
				<view class="bujin">
					<image :src="imgurl +items.img" class="bu_img" mode="widthFix"></image>
					<view class="bu_cen">
						<u-number-box :min="1" :max="items.num" v-model="value" @change="valChange"></u-number-box>
					</view>
					<view @click="zuida" class="bu_right button">
						最大
					</view>
				</view>
				<!-- /下方文字 -->
				<view class="wenzi">
					购买 <text>{{value}}</text> 个{{items.name}}，需支付银元 <text>{{items.crystal*value}}</text>
				</view>
				<!-- 下方的购买按钮 -->
				<view @click="onPay" class="gou_btn button">
					购买
				</view>
				<!-- 银元剩余 -->
				<view class="shuiing">
					银元剩余： <text>{{userinfo.crystal}}</text> 个
				</view>
			</view>
		</u-popup>

		<!-- 点击出售弹窗 -->
		<u-popup v-model="show3" @close="close2" :custom-style="{maxWidth:'480px',margin:'0 auto'}" border-radius="25" mode="bottom">
			<view class="tanchu">
				<view class="goumai">
					<text>出售</text>
					<image @click="show3 = false" src="http://img.cpgm.cc/panda/static/feed/cha.png" mode="widthFix" />
				</view>
				<!-- 步进器 -->
				<view class="bujin">
					<view class="b_left">
						<image :src="imgurl +items.img" class="bu_img" mode="widthFix"></image>
						<view class="bu_cen">
							<u-number-box :min="1" :max="items.num" v-model="value" ></u-number-box>
						</view>
						<view @click="chuMax" class="bu_right button">
							最大
						</view>
					</view>
					<!-- 下方的购买按钮 -->
					<view @click="querenTs2" class="gou_btn button">
						出售
					</view>
				</view>
				<!-- /下方文字 -->
				<view class="wenzi">
					出售 <text>{{value}}</text> 个{{items.name}}，共计获得银元 <text>{{(items.crystal*value).toFixed(2)}}</text>银元
				</view>
				
				<!-- 银元剩余 -->
				<view class="shuiing">
					<!-- 我可出售： <text>4562.00</text> 个 -->
				</view>
			</view>
		</u-popup>





		<!-- 交易记录 -->
		<u-popup v-model="logshow" mode="bottom" border-radius="34">
			<view class="popbox">
				<image class="p_close" @click="logshow = false" src="http://img.cpgm.cc/panda/static/feed/cha.png" mode="widthFix" />
				<view class="p_tit">交易记录</view>
				<view class="p_explain">
					<text>物品</text>
					<text>数量</text>
					<text>银元</text>
				</view>
				
				<view class="p_list">
					<scroll-view scroll-y class="p_scroll" @scrolltolower="pcsrolltolower()">
						<view class="p_item" v-for="(item , index) in paylist" :key="index">
							<view class="left">
								<image :src="imgurl+item.img" mode="widthFix" />
								<view class="word">
									<text>{{item.name}}</text>
									<text>{{$u.timeFormat(item.created_at, 'yyyy-mm-dd hh:MM:ss')}}</text>
								</view>
							</view>
							<view class="center">{{item.operation_type==1?'出售':'购入'}}<text>{{item.num}}个</text></view>
							<view class="right">{{item.operation_type==1?'+':'-'}}{{item.number}}</view>
						</view>
						<view v-if="paylist.length==0" class="empty">
							<image src="http://img.cpgm.cc/jsjy/static/public/empty.png" class="zaneu_img"
								mode="widthFix">
							</image>
							<text>没有数据哦~</text>
						</view>
						<u-loadmore v-else :status="status2" :icon-type="iconType" :load-text="loadText2" />
					</scroll-view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		setatList
	} from '@/utils/toos.js'
	import config from '@/common/config/index.js'

	export default {
		data() {
			return {
				imgurl: config.imgurl,
				headerimgurl: config.headerimgurl,
				shaiName: '全部',
				num: 0, //这是选择
				act: 1,
				show: 1,
				show2: false,
				show4: false,
				show3: false,
				show5: false,
				value1: 1,
				item: {},
				max: 1,
				ind: 0,
				value: 1,
				page: 1,
				max_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉加载',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				loadText2: {
					loadmore: '上拉加载',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				list2: [],
				list: [],
				setatList: setatList,
				shaiList: {
					1:[],
					2:[],
					3:[],
					4:[],
					5:[],
				},
				items: {},
				userinfo: {},
				tablist: [{
						id: 1,
						name: '出售中'
					},
					{
						id: 2,
						name: '求购中'
					},
				],
				stat: 1,
				tablist1: [{
						id: 1,
						name: '战力',
						isrequest:false,
					},
					{
						id: 2,
						name: '道具',
						isrequest:false,
					},{
						id: 3,
						name: '熊猫',
						isrequest:false,
					},
					{
						id: 4,
						name: '其他',
						isrequest:false,
					},
				],
				stat1: 1,
				background: {
					background: "transparent",
				},
				page2: 1,
				max_page2: 1,
				shaixuanid: '',
				scrolltop: 0,
				paypage:1,
				paymax_page:1,
				paylist:'',
				isfirstrequest:false,
				logshow:false,
			}
		},
		onShow() {
			this.page = 1
			this.page2 = 1
			this.max_page = 1
			this.max_page2 = 1
			this.stat = 1
			this.list = []
			this.list2 = []
			this.oneList()
		},

		onHide() {
			this.page = 1
			this.page2 = 1
			this.max_page = 1
			this.max_page2 = 1
			this.stat = 1
			this.list = []
			this.list2 = []
		},
		onLoad() {
			this.userinfos()
			this.initList(1)
		},

		onReachBottom() {
			
		},
		methods: {

			scrolltolowerlist(){
				if (this.stat == 1) {
					if (this.page >= this.max_page) {
						this.status = 'nomore'
						return;
					}
					this.status = 'loading';
					this.page = ++this.page;
					this.oneList()
					setTimeout(() => {
						if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				} else {
					if (this.page2 >= this.max_page2) {
						this.status = 'nomore'
						return;
					}
					this.status = 'loading';
					this.page2 = ++this.page2;
					this.toList()
					setTimeout(() => {
						if (this.page2 > this.max_page2 || this.page2 == this.max_page2) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}
			},

			// 记录
			logpopshow(){
				if(!this.isfirstrequest) {
					this.getpayLogs();
				}
				this.logshow = true
			},

			// 点击确认
			async querenTs2() {
				let res = await this.$http.index.onSell({
					id: this.item.id,
					nums: this.value
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.show3 = false
					this.list2 = []
					this.page2 = 1
					this.toList()
				}
			},
			// 点击取消
			quxiao2() {
				this.show5 = false
			},
			async querenTs() {
				// 点击确定
				let res = await this.$http.index.onBuy({
					id: this.item.id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.list.splice(this.ind, 1)
					this.show4 = false
				}
			},
			// 点击取消
			quxiao() {
				this.show4 = false
			},
			//切换
			tabchange(id) {
				this.stat1 = 1
				this.shaixuanid = ''
				this.shaiName = '全部'
				this.num = 0
				this.stat = id
				if (id == 2) {
					this.page = 1
					this.page2 = 1
					this.list = []
					this.list2 = []
					this.toList();
				} else {
					this.page = 1
					this.page2 = 1
					this.list = []
					this.list2 = []
					this.oneList()
				}
			},

			//切换
			tabchange1(id) {
				this.num = -1
				this.stat1 = id
				console.log(id);
				if(!this.tablist1[id - 1].isrequest){
					this.initList(id);
				}
			},

			// 获取出售列表
			async oneList(id) {
				let res = await this.$http.index.sellList({
					page: this.page,
					id: this.shaixuanid
				})
				this.list = [...this.list, ...res.data];
				this.max_page = res.page;
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				}
			},

			// 获取求购列表
			async toList() {
				let res = await this.$http.index.buyList({
					page: this.page2,
					id: this.shaixuanid
				})
				this.list2 = [...this.list2, ...res.data];
				this.max_page2 = res.page;
				if (this.page2 >= this.max_page2) {
					this.status = 'nomore'
				}
			},

			// 购买接口
			async buy(item, index) {
				this.item = item
				this.ind = index
				this.show4 = true
			},

			// 出售接口-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
			async sell(item) {
				this.item = item
				this.items = item
				this.show3 = true
				// this.initList()
			},


			// /点击出售
			async chumai(item) {
				let n = await this.$http.index.onSell({
					id: item.id
				})
				this.$msg(n.msg)
				if (n.code == 1) {
					//重新加载数据
					this.list2 = []
					this.page = 1
					this.max_page = 1
					this.toList()
				}
			},
			// /点击购买
			async onPay(item) {
				let n = await this.$http.index.onBuy({
					id: item.id
				})
				this.$msg(n.msg)
				if (n.code == 1) {
					//重新加载数据
					this.list = []
					this.page = 1
					this.max_page = 1
					this.oneList()
				}
			},
			// 点击最大（
			zuida() {
				this.value = this.items.num
			},
			
			// 点击筛选
			shaixuan(ind, item) {
				if (ind == 0) {
					this.shaixuanid = ''
				} else {
					this.shaixuanid = item.id
				}
				this.num = ind
				this.shaiName = item.name
				// 关闭弹出层
				if (this.stat == 1) {
					this.page = 1
					this.list = []
					this.oneList()
				} else {
					this.page2 = 1
					this.list2 = []
					this.toList()
				}
			},
			// 出售点击最大
			chuMax() {
				
				this.value = this.items.num
			},
			// 点击购买
			payOrder(item, num) {
				if (num == 1) {
					// 购买
					// this.show2 = true
					this.items = item
					this.onPay(item)
				} else if (num == 2) {
					// 出售
					this.chumai(item)
					// this.show3 = true
				}
			},
			// 关闭弹出层
			close2() {
				this.value = 1
			},
			// 滚动容器
			scrolltolower1(e) {
				if (this.page >= this.max_page) {
					this.status = 'nomore'
				} else {
					this.status = 'loading';
					this.page = ++this.page;
					this.oneList();
					setTimeout(() => {
						if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}
			},
			scrolltolower2(e) {
				console.log(this.page, this.max_page2);
				if (this.page >= this.max_page2) {
					this.status = 'nomore'
				} else {
					this.status = 'loading';
					this.page = ++this.page;
					this.toList();
					setTimeout(() => {
						if (this.page > this.max_page2 || this.page == this.max_page2) this.status = 'nomore';
						else this.status = 'loading';
					}, 500)
				}
			},

			// 步进器
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			// 点击我的出售
			my_sales() {
				this.$p.navto('/pages/game/salesOrder')
			},
			// 跳转交易记录
			jilu() {
				this.$p.navto('/pages/game/my_records')
			},
			// 跳转到我的求购
			my_want() {
				this.$p.navto('/pages/game/my_Want')
			},

			// 请求道具列表
			async initList(style) {
				this.shaiList[style] = [{
					name: '全部',
					id: 0,
					bgImg: 'http://img.cpgm.cc/panda/static/game/vib.png',
					img: 'http://img.cpgm.cc/panda/static/game/quanb2.png'
				}]
				let n = await this.$http.index.exchangeList({
					type: 4,
					style:style==4?5:style,
				})
				this.shaiList[style] = [...this.shaiList[style], ...n.data]
				this.tablist1[style - 1].isrequest = true
			},



			userinfos() {
				this.$getUserInfo.getUserInfo((res) => {
					this.userinfo = res.data
				})
			},
			// 初始化
			init() {
				this.page = 1
				this.page2 = 1
				this.max_page = 1
				this.max_page2 = 1
				this.list = []
				this.list2 = []
			},



			// 获取水晶明细
			async getpayLogs() {
				let res = await this.$http.index.payLogs({
					page: this.paypage
				})
				this.paylist = [...this.paylist, ...res.data];
				this.paymax_page = res.page;
				if (this.paypage >= this.paymax_page) {
					this.status2 = 'nomore'
				}
				this.isfirstrequest = true
			},

			// 交易记录触底事件
			pcsrolltolower(){
				if (this.paypage >= this.paymax_page) {
					this.status2 = 'nomore'
					return;
				}
				this.status2 = 'loading';
				this.paypage = ++this.paypage;
				this.getpayLogs()
				setTimeout(() => {
					if (this.paypage > this.paymax_page || this.paypage == this.paymax_page) this.status2 = 'nomore';
					else this.status2 = 'loading';
				}, 500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.zone {
		background: linear-gradient(180deg, #005FFE 0%, #2BD2F7 34%, #58F6D9 53%, #28E2F5 62%, #8B66FC 100%);
		min-height: 100vh;
	}

	.main {
		padding: 12px 12px;
	}

	.tanchu {
		position: relative;
		padding: 20px;
		min-width: 310px;
		// height: 215px;
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
		border-radius: 28px 28px 0px 0px;
		border-radius: 15px;

		.btn {
			width: 100%;
			height: 57px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30px;

			.lef_btn {
				width: 120px;
				height: 40px;
				background: #eaeaea;
				border-radius: 5px;
				font-size: 16px;
				font-weight: bold;
				font-size: 16px;
				font-weight: bold;
				color: #000000;
				text-align: center;
				line-height: 40px;
			}

			.rig_btn {
				width: 120px;
				height: 40px;
				background: linear-gradient(180deg, #7AFDCF 0%, #0477FD 100%);
				border-radius: 5px;
				font-size: 16px;
				font-weight: bold;
				font-size: 16px;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 40px;
			}
		}

		.tishi {
			text-align: center;
			margin: 10px 0;
			font-size: 15px;
			font-weight: 600;
			color: #696969;
		}







		.fuzhi {
			width: 148px;
			height: 39px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 20px;
			font-size: 14px;
			font-family: SourceHanSansCN-Bold, SourceHanSansCN;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 39px;
			margin: 0 auto;
			margin-top: 10px;
		}
	}

	.center_prop {
		position: relative;
		height: 16px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 25px;

		.text {
			font-size: 20px;
			font-weight: bold;
			color: #131314;
			margin: 0 16px;
		}

		.xing {
			width: 14px;
			height: 14px;
		}

		.bg_qiu {
			position: absolute;
			width: 35px;
			height: 17px;
			border-radius: 10px;
			z-index: -1;
			left: 50%;
			transform: translateX(-70%);
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		}
	}





	.r_title {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		color: #fff !important;
		font-size: 12px !important;
	}


	// tab导航
	.tab {
		width: 100%;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		padding: 5px;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 7px;

		view {
			width: 50%;
			height: 42px;
			text-align: center;
			line-height: 42px;
			color: #343434;
			font-size: 13px;
			font-weight: 600;
			border-radius: 7px;
		}
	}

	.active {
		color: #FFFFFF !important;
		background: #000000 !important;
	}



	.item {
		background: rgba(255, 255, 255, 0.7);
		border-radius: 7px;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;

		.button {
			width: 72px;
			height: 33px;
			background: linear-gradient(180deg, #7AFDCF 0%, #0477FD 100%);
			border-radius: 17px;
			border: 2px solid #FFFFFF !important;
			color: #fff;
			font-size: 12px;
			margin-left: 10px;
		}
	}

	.i_left {
		display: flex;
		align-items: center;
		flex: 1;

		.imgbox {
			width: 75px;
			height: 75px;
			background: #fff;
			margin-right: 10px;

			image {
				width: 100%;
			}
		}

		.word {
			display: flex;
			flex: 1;
			flex-direction: column;

			p:nth-child(1) {
				color: #111110;
				font-size: 15px;
				font-weight: 600;
			}

			p:nth-child(2) {
				color: #343434;
				font-size: 12px;
				margin: 5px 0;

				text {
					font-size: 12px;
					font-weight: bold;
					color: #fff;
					line-height: 18px;
					background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}

			.whitebg {
				background: #fff;
				border-radius: 10px;
				width: fit-content;
				padding: 2px 4px;

				text {
					font-size: 12px;
					font-weight: bold;
					color: #fff;
					line-height: 18px;
					background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					margin-right: 8px;
					zoom: 0.9;
				}
			}
		}
	}

	.btnbox {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30px;
		width: 60%;
		max-width: 400px;
		background: rgba(255, 255, 255, 0.6);
		box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.12);
		border-radius: 30px;
		backdrop-filter: blur(10px);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;

		.p_btn {
			width: 100%;
			height: 60px;
			text-align: center;
			line-height: 60px;
		}

		.line {
			width: 1px;
			background: #979797;
			height: 30px;
		}
	}










	.tanchu {
		position: relative;
		padding: 20px;
		min-width: 310px;
		// height: 215px;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 15px;

		.btn {
			width: 100%;
			height: 57px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20px;
			margin-top: 30px;

			.lef_btn {
				width: 120px;
				height: 40px;
				background: #eaeaea;
				border-radius: 5px;
				font-size: 16px;
				font-weight: bold;
				font-size: 16px;
				font-weight: bold;
				color: #000000;
				text-align: center;
				line-height: 40px;
			}

			.rig_btn {
				width: 120px;
				height: 40px;
				background: linear-gradient(180deg, #7AFDCF 0%, #0477FD 100%);
				border-radius: 5px;
				font-size: 16px;
				font-weight: bold;
				font-size: 16px;
				font-weight: bold;
				color: #fff;
				text-align: center;
				line-height: 40px;
			}
		}

		.tishi {
			text-align: center;
			margin: 10px 0;
			font-size: 15px;
			font-weight: 600;
			color: #696969;
		}

		.fuzhi {
			width: 148px;
			height: 39px;
			background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
			border-radius: 20px;
			font-size: 14px;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 39px;
			margin: 0 auto;
			margin-top: 10px;
		}
	}

	.center_prop {
		position: relative;
		height: 16px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 25px;

		.text {
			font-size: 20px;
			font-weight: bold;
			color: #131314;
			margin: 0 16px;
		}

		.xing {
			width: 14px;
			height: 14px;
		}

		.bg_qiu {
			position: absolute;
			width: 35px;
			height: 17px;
			border-radius: 10px;
			z-index: -1;
			left: 50%;
			transform: translateX(-70%);
			background: linear-gradient(180deg, #AEE4FE 0%, #8BFDC1 100%);
		}
	}

	.slot-content {
		background-color: #fff;
		width: 100%;
		padding: 30px 0;
		position: relative;
		z-index: 999;
		border-radius: 0 0 30px 30px;
		
	}

	

	/deep/ .u-icon-plus {
		width: 20px;
		height: 20px !important;
		border-radius: 10px;
		background: #EBEBEB !important;
	}

	/deep/.u-icon-disabled {
		width: 20px;
		height: 20px !important;
		border-radius: 10px;
	}

	/deep/.u-icon-minus {
		width: 20px;
		height: 20px !important;
		border-radius: 10px;
		background: #EBEBEB !important;
	}

	/deep/.u-iconfont {
		font-size: 8px !important;
		font-weight: 700 !important;
		color: #000000;
	}

	/deep/.uicon-arrow-left::before {
		font-size: 20px !important;
		font-weight: 500 !important;
	}

	/deep/.u-iconfont {
		font-size: 20rpx !important;
	}

	/deep/.u-number-input {
		background-color: transparent !important;
	}

	.tanchu {
		padding: 20px 0;
		background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);

		.shuiing {
			font-size: 13px;
			font-weight: 500;
			color: #696969;
			text-align: center;
			margin: 20px 0;

			text {
				color: #239D4C;
			}
		}

		.gou_btn {
			width: 75px;
			height: 34px;
			background: linear-gradient(180deg, #7AFDCF 0%, #0477FD 100%);
			border-radius: 5px;
			font-size: 14px;
			color: #fff;
		}

		.wenzi {
			font-size: 12px;
			font-weight: 500;
			color: #343434;
			margin-top: 13px;
			text-align: center;
			margin-bottom: 50px;

			text {
				color: #239D4C;
			}
		}

		.bujin {
			width: 80%;
			height: 45px;
			background-color: #fff;
			border-radius: 23px;
			margin: 0 auto;
			margin-top: 25px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px;

			.b_left {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.bu_img {
				width: 23px;
				height: 23px;
				margin-right: 10px;
			}

			.bu_right {
				width: 34px;
				height: 19px;
				background: #EBEBEB;
				border-radius: 3px;
				margin-left: 10px;
				font-size: 9px;
				font-weight: 600;
				color: #000000;
				line-height: 19px;
				text-align: center;
			}
		}

		.goumai {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 15px;
			text {
				font-size: 20px;
			font-weight: bold;
			color: #343434;
			text-align: center;
			}

			image {
				width: 25px;
			}
		}
	}

	.zanwu {
		font-size: 18px;
		font-weight: 600;
		position: relative;
		top: 40%;
		text-align: center;
		color: #e6bc96;
	}

	.xiala {
		position: relative;
		background: rgba(255,255,255,0.5);
		border-radius: 7px;
		padding: 10px;
		margin-top: 10px;
	}

	.body {
		position: relative;
		width: 100%;
		height: calc(100vh - 100px);
		background-color: #fff;
		border-radius: 30px 30px 0 0;
		padding: 10px;


		.bot_btn {
			width: 50%;
			height: 41px;
			position: absolute;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			background: #FFFFFF;
			box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.12);
			border-radius: 20px;
			padding: 8px 10px;
			display: flex;

			text {
				font-size: 13px;
				font-weight: 500;
				color: #343434;
			}

			.left {
				flex: 1;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-right: 1px solid #FEE1C3;

				.shoop {
					width: 17px;
					height: 17px;
					margin-right: 5px;
				}
			}

			.right {
				flex: 1;
				display: flex;
				height: 100%;
				justify-content: center;
				align-items: center;

				.shoop {
					width: 17px;
					height: 17px;
					margin-right: 5px;
				}
			}
		}

		.list {
			height: calc(100% - 30px);
			overflow-y: auto;
			padding-top: 10px;

			.list_son {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 11px;
				border: 1px solid #FEE1C3;
				padding: 10px;
				margin-bottom: 10px;

				.right {
					width: 77px;
					height: 33px;
					line-height: 33px;
					text-align: center;
					background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
					border-radius: 6px;
					font-size: 14px;
					font-family: SourceHanSansCN-Bold, SourceHanSansCN;
					font-weight: bold;
					color: #000000;
				}


				.cen {
					display: flex;
					align-items: center;

					.jieshao {
						.jieshao_top {
							font-size: 15px;
							font-family: SourceHanSansCN-Medium, SourceHanSansCN;
							font-weight: 500;
							color: #131314;
						}

						.jieshao_cen {
							font-size: 11px;
							font-family: SourceHanSansCN-Medium, SourceHanSansCN;
							font-weight: 500;
							color: #343434;

							text {
								color: #239D4C;
							}
						}

						.jieshao_bot {
							font-size: 11px;
							font-family: SourceHanSansCN-Medium, SourceHanSansCN;
							font-weight: 500;

							text {
								color: #239D4C;
							}

							.img_tu {
								width: 16px;
								height: 14px;
							}
						}
					}

					.left {
						width: 57px;
						height: 57px;
						background: url('http://img.cpgm.cc/panda/static/game/vib.png') no-repeat;
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 10px;

						.img {
							width: 38px;
							height: 38px;
						}
					}
				}

				.left2 {
					width: 57px;
					height: 57px;
					background: url('http://img.cpgm.cc/panda/static/game/bein.png') no-repeat;
					background-size: 100% 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					.img {
						width: 38px;
						height: 38px;
					}
				}
			}
		}
	}

	.jiantou {
		position: absolute;
		width: 20rpx;
		top: 50%;
		left: 8%;
		height: 20rpx;
		z-index: 99999999;
	}

	/deep/ .u-cell-box {
		width: 30%;
	}

	/deep/.u-dropdown__menu__item__text {
		font-size: 12px !important;
		font-weight: 600;
		margin-right: 4px;
	}

	/deep/ .u-dropdown__menu {
		height: 41px !important;
	}

	/deep/ .u-dropdown__menu__item {
		flex: 1;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}


	.top_t {
		position: fixed;
		top: 0;
		height: 750rpx;
		max-width: 480px;
		width: 100%;
		background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
		z-index: -1;
	}

	::v-deep .u-dropdown__content__mask {
		background: none;
	}


	.zanwu {
		font-size: 14px;
		color: #A1A1A1;
		font-weight: 500;
		margin-top: 50%;
		text-align: center;

		.zaneu_img {
			width: 70%;

		}
	}


	.scrollbox {
		width: 100%;	
		background: rgba(255, 255, 255, 0.7);
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		padding: 5px;

		.lists {
			width: 100%;
			display: flex;
			align-items: center;
			// overflow-y: auto;
			box-sizing: border-box;
			
			.list_sons {
				// width: 26%;
				height: 75px;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin: 0 5px ;

				.name {
					font-size: 12px;
					zoom: 0.9;
					font-weight: 600;
					color: #111110;
					margin-top: 2px;
				}

				.name2 {
					font-size: 12px;
					zoom: 0.9;
					font-weight: 600;
					color: #111110;
					margin-top: 5px;
				}

				.img_bg {
					width: 60px;
					height: 60px;
					position: relative;
					background: #fff;
					border-radius: 10px;

					.bgtu {
						width: 57px;
						height: 57px;
						position: absolute;
						top: 0;
						left: 0;
						z-index: -1;
					}

					.duigou {
						position: absolute !important;
						z-index: 10;
						width: 57px;
						height: 57px;
						top: 0%;
						left: 0;
					}

					.baowu1 {
						width: 37px;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}

					.baowu {
						width: 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
		}
	}

	.border {
		position: relative;
	}
	.border::after {
		content:'';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('http://img.cpgm.cc/panda/static/game/xz.png');
		background-size: 100% 100%;
	}

	.scrollbox2 {
		height: calc(100vh - 402px);
		margin-top: 10px;
		.list {
			padding-bottom: 80px;
		}
	}

.popbox {
	background: linear-gradient(180deg, #96FCF3 0%, #DAFEFB 64%, #F8FEC6 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	padding: 15px;
	position: relative;
}

.p_tit {
	text-align: center;
	color: #000000;
	font-size: 20px;
	font-weight: 600;
}

.p_explain {
	background: rgba(255,255,255,0.5);
	border-radius: 5px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;

	text {
		color: rgba(52, 52, 52, 0.61);
	}

	text:nth-child(2) {
		margin-left: 28%;
	}
}


.p_scroll {
	height: 50vh;
	margin-top: 10px;
}
.p_item {
	background: #FFFFFF;
	border-radius: 8px;
	padding: 10px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.word {
	display: flex;
	flex-direction: column;

	text:nth-child(1) {
		color: #000000;
		font-size: 13px;
		font-weight: 600;
	}
	text:nth-child(2) {
		color: #343434;
		font-size: 12px;
		margin-top: 5px;
	}
}

.left {
	display: flex;
	align-items: center;
	width: 58%;

	image {
		width: 50px;
		margin-right: 10px;
		background: linear-gradient(223deg, #0477FD 0%, #3CB6E7 41%, #3BCAF6 61%, #8A68FC 100%, #8A68FC 100%);
		border-radius: 4px;
	}
}

.center {
	color: #000000;
	font-size: 14px;
	font-weight: 600;
	width: 20%;
	flex: 1;
}

.right {
	color: #000000;
	font-size: 16px;
	font-weight: 600;
}

.p_close {
	position: absolute;
	width: 25px;
	right: 10px;
	top: 10px;
}

.lef_btn {
	width: 45%;
    height: 50px;
    background: linear-gradient(90deg, #52A446, #6CBE5F);
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.5), inset -1px -3px 0px 0px #44513A, inset 0px 3px 0px 0px rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    border: 1px solid #44513A;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    filter: grayscale(1);
}

.rig_btn {
	width: 45%;
    height: 50px;
    background: linear-gradient(90deg, #52A446, #6CBE5F);
    box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.5), inset -1px -3px 0px 0px #44513A, inset 0px 3px 0px 0px rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    border: 1px solid #44513A;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    text-align: center;
}

.btn {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tishi {
	color: #987145;
}





// tab导航
	.tab2 {
		width: 100%;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 20px;
		overflow: hidden;
		margin: 0 auto;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 9px;

		view {
			position: relative;
			width: 50%;
			height: 40px;
			text-align: center;
			line-height: 40px;
			color: rgba(52, 52, 52, 0.6);
			font-size: 13px;
		}
	}

	.active2 {
		color: #000000 !important;
		position: absolute;


	}

	.active2::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 32px;
		height: 4px;
		background: #000000;
		border-radius: 7px;
		backdrop-filter: blur(10px);
	}



</style>